<template>
  <n-popover
    style="
      --n-border-radius: 4px;
      --n-box-shadow: 0 28px 50px rgba(25, 24, 40, 0.35);
      --n-padding: 0;
    "
    class="norem-history-pop"
    content-class="user-popover"
    placement="bottom"
    trigger="hover"
  >
    <template #trigger>
      <div class="norem-down-name">历史</div>
    </template>
    <div class="norem-pop-dia">
      <div class="list">
        <div class="card flex" v-for="item in tableData" :key="item.id">
          <img
            class="cover"
            :src="$getImg(item.info.cover)"
            @click="handDetail(item)"
            alt="图片"
          />
          <div class="info">
            <div>
              <div class="name">{{ item.info.name }}</div>
              <div class="auth">作者: {{ item.info.author.username }}</div>
              <div class="tags">
                <div class="tag free" v-if="item.info.price === 0">限免</div>
                <div class="tag free" v-else>{{ item.info.price }}币</div>
                <div class="tag">{{ item.info.photo_count }}图</div>
                <div class="tag">{{ item.info.video_count }}视频</div>
              </div>
            </div>
            <div>
              <span class="next">继续观看</span>
            </div>
          </div>
        </div>
      </div>
      <div class="norem-more">
        <span>查看全部</span>
        <i class="norem-icon esayIcon esayIcon-gengduo"></i>
      </div>
    </div>
  </n-popover>
</template>
<script setup lang="ts">
import logApi from '@/service/api/log'

const tableData = ref<any>([])
const init = async () => {
  const { data } = await logApi.list({
    current: 1,
    size: 5
  })
  tableData.value = data.data
  console.log(data.data)
}
init()
const router: any = useRouter()
const handDetail = (e: any) => {
  router.push({
    path: e.info.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.info.id
    }
  })
}
</script>
<style scoped lang="scss">
.norem-down-name {
  color: #333;
  cursor: pointer;
  font-size: 14px;
  padding: 0 15px 0 15px;
  &:hover {
    color: var(--n-color);
  }
}
.norem-pop-dia {
  width: 270px;
}
</style>
<style lang="scss">
.norem-history-pop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .list {
    padding: 10px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    .card {
      &:not(:first-child) {
        margin-top: 10px;
      }
      .cover {
        width: 80px;
        aspect-ratio: 4/5.5;
        border-radius: 4px;
        object-fit: cover;
      }
      .info {
        flex: 1 0 0;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .auth {
          margin-top: 5px;
          font-size: 12px;
          color: #999;
        }
        .tags {
          margin-top: 5px;
          display: flex;
          flex-wrap: wrap;
          gap: 5px;

          .tag {
            font-size: 10px;
            background: rgba(136, 136, 136, 0.1);
            padding: 0 6px;
            border-radius: 4px;
            color: #888;
          }

          .free {
            background: linear-gradient(
              317deg,
              #4d4c4c 30%,
              #7b7b7b 70%,
              #5f5c5c 100%
            );
            color: #ddd;
          }
        }
        .next {
          color: #999;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }
  .norem-more {
    background-color: #f4f4f4;
    color: rgba(0, 0, 0, 0.56);
    padding: 6px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 0 0 4px 4px;
    .norem-icon {
      font-size: 13px;
      margin-left: 2px;
    }
  }
}
</style>
